<template>
  <div>
    <el-tag
      v-for="(item, index) in row.shippings"
      :key="index"
      class="shippingTag"
      type="primary"
      effect="plain"
    >
      {{ item.trackingCompany }}
    </el-tag>

    <div class="tagLine" />

    <template v-if="row.order.otherLogisticsId === 0">
      <el-tag v-if="row.order.freightName" type="primary" effect="plain">
        {{ row.order.freightName }}
      </el-tag>
      <template v-else>
        <div class="stance" />
      </template>
      <div class="tagLine" />
    </template>

    <template v-if="row.order.otherLogisticsId !== 0">
      <el-tag
        v-if="row.order.otherLogisticsName"
        class="shippingTag"
        type="success"
        effect="plain"
      >
        {{ row.order.otherLogisticsName }}
      </el-tag>
    </template>
    <template v-else>
      <div class="stance" />
    </template>

    <div class="tagLine" />

    <el-tag v-if="row.order.waybill" class="shippingTag" type="primary">
      {{ row.order.waybill }}
    </el-tag>
  </div>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      reqired: true,
      default: () => ({})
    }
  }
};
</script>

<style scoped lang="scss">
.tagLine {
  height: 0;
  border: 1px dashed #ccc;
  margin: 5px 0;
}
.shippingTag {
  white-space: inherit;
  margin-bottom: 5px;
  margin-left: 5px;
  line-height: 14px;
  padding: 3px;
  height: auto;
}
.stance {
  height: 20px;
}
</style>
